<!DOCTYPE HTML>

<html>
<head>
    <title>3DS - One-Time Passcode - PA</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <style>
			/* General Styling*/
			body {    
				font-family: 'Open Sans', sans-serif;
				font-size:11pt;
			}
			
			ol, ul {
				list-style: none;
				padding-left:0px;
			}
			
		
			summary::-webkit-details-marker {
			  display: none
			}

			summary {
				background-color: #eeeeee;
				color:#333;
				padding: 7px 10px 7px 10px;
				margin-bottom: 13px;
			}
			
			div.related-container { 
				margin-top:50px;
			}
			
			p.summary-p {
				padding: 7px 10px 7px 10px;
				background: #f4f4f4;
				margin-top:-22px;
				margin-bottom:0px;
			}
			
			.button {
				background-color: #007987;
				border-radius: 5px;
				border: 0;
				color: #ffffff;
				cursor: pointer;
				display: inline-block;
				font-weight: 400;
				height: 2.5em;
				line-height: 2.5em;
				text-align: center;
				text-decoration: none;
				white-space: nowrap;
				display: block;
				width: 100%;
				margin-bottom:15px;
			}
				.button.primary {
				background-color: #ef8200;
				}

				.button:hover {
					background-color: #737373;
				}

				.button:active {
					background-color: #595959;
				}
				
				.canvas {
					padding: 15px; border: 1px solid #eee;
					margin-bottom:15px;
					}
					
				#content h2 {
					margin-top:0px;
				}
				.input-field {
					background: #fff;
					border: solid 1px #e0e0e0;
					border-radius: 5px;
					color: inherit;
					display: block;
					outline: 0;
					padding: 7px 0px 7px 0px;
					text-decoration: none;
					width: 100%;
					margin-bottom:15px;
				}
				
				
				/*Images*/
					.logo-bank {
					background-position: center;
					display:inline-block;
					width: 150px;
					height: 35px;
					background-size: auto  33px;
					background-repeat: no-repeat;
					background-image: url();
					}			
				
				
				
				.logo-ul{
					display:inline-block;
					width: 96px;
					height: 47px;	
					float:right;
					background-size: auto  47px;
					background-repeat: no-repeat;
					background-image: url();
				}

    </style>
</head>
<body class="">
<div id="page-wrapper">
    <!-- Header Section -->
    <header id="header" class="canvas">
        <span class="logo-ul"></span>
        <span class="logo-bank"></span>
    </header>

    <!-- Main Content Section -->
    <section id="content" class="canvas">
        <div class="row">
            <h2>Purchase Authentication</h2>
            <p>We have send you a text message with a code to your registered mobile number ending in ***.</p>
            <p>You are paying Merchant ABC the amount of $xxx.xx on mm/dd/yy.</p>
        </div>

        <div class="row">
            <p><strong>Enter your code below:</strong></p>
            <form action="HTTPS://EMV3DS/challenge" method="post" name="cardholderInput">
                <input type="text" class="input-field" name="code" value=" Enter Code Here">
                <input type="submit" class="button primary" value="SUBMIT">
            </form>
            <form action="HTTPS://EMV3DS/challenge" method="post" name="resendChallengeData">
                <input type="hidden" name="resend" value="true">
                <input type="submit" class="button" value="RESEND CODE">
            </form>
        </div>
    </section>

    <!-- Help Section -->
    <section id="help" class="container">
        <div class="row">
            <details>
                            
                <summary>Need some help?</summary>
                <p class="summary-p">Help content will be displayed here.</p>
                         
            </details>
        </div>
        <div class="row detailed">
            <details>
                            
                <summary>Learn more about authentication</summary>
                <p class="summary-p">Authentication information will be displayed here.</p>
                         
            </details>
        </div>
    </section>

    <!-- Footer -->
    <footer id="footer">
        <ul class="copyright">
            <li>&copy; UL . All rights reserved.</li>
            </li>
        </ul>
    </footer>
</div
</body>
</html>
